Props কী? কিভাবে ব্যবহার করবেন? — React Props Explained in Bengali

React-এ Props হলো “Properties” এর সংক্ষিপ্ত রূপ। এটি Parent Component থেকে Child Component-এ ডেটা পাঠানোর সবচেয়ে গুরুত্বপূর্ণ পদ্ধতি। Props একমুখী (one-way) — অর্থাৎ উপর থেকে নিচে (Parent → Child) ডেটা যায়, নিচ থেকে উপর নয়।

React-এ component reuse এবং dynamic UI তৈরির জন্য props অত্যন্ত জরুরি। এই আর্টিকেলে আপনি props কী, কিভাবে কাজ করে, কেন প্রয়োজন এবং কিভাবে ব্যবহার করবেন, তা উদাহরণসহ বিস্তারিত শিখবেন।

Props কী?

Props হলো JavaScript Object যা কোনো Component-এ Argument হিসেবে পাঠানো হয়। যেমন JavaScript function-এর Argument থাকে, তেমন React Component-এর “Props” থাকে।

Props হলো:

• Read-only (পরিবর্তন করা যায় না)
• Parent থেকে Child এ ডেটা পাঠায়
• Dynamic UI তৈরি করতে সাহায্য করে
• Component Reusability বাড়ায়

Props কেন ব্যবহার করা হয়?

• একই Component-কে বিভিন্ন ডেটা দিয়ে customize করতে
• Parent Component থেকে তথ্য Child-এ পাঠাতে
• Dynamic content render করতে
• Reusability বাড়াতে

Props কিভাবে কাজ করে? (Simple Example)

Parent Component → Child Component এ ডেটা পাঠানো

// Parent Component
function App() {
  return (
    <div>
      <Message text="Welcome to React Props!" />
    </div>
  );
}

// Child Component
function Message(props) {
  return <h2>{props.text}</h2>;
}

export default App;

এখানে App Component Message Component-কে একটি prop পাঠিয়েছে: text="Welcome to React Props!"

Child Component props কে গ্রহণ করছে: props.text

Props Object কী?

React props সবসময় একটি object আকারে Child Component-এ যায়:

{
  text: "Welcome to React Props!"
}

আপনি চাইলে console-এ দেখতে পারেন:

console.log(props);

Props Destructuring (Best Practice)

Destructuring ব্যবহার করলে কোড আরও পরিষ্কার হয়।

function Message({ text }) {
  return <h2>{text}</h2>;
}

এটি একই কাজ করে, কিন্তু বেশি পরিষ্কার।

Multiple Props পাঠানো

// Parent Component
<User name="Prabir" age={23} isStudent={true} />

// Child Component
function User({ name, age, isStudent }) {
  return (
    <div>
      <h3>Name: {name}</h3>
      <p>Age: {age}</p>
      <p>Student: {isStudent ? "Yes" : "No"}</p>
    </div>
  );
}

Props বিভিন্ন ডেটাটাইপ (string, number, boolean, array, object, function) গ্রহণ করতে পারে।

Props দিয়ে Function পাঠানো

Parent Component → Child Component কে Function পাঠাতে পারে।

// Parent Component
function App() {
  const greet = () => alert("Hello from Parent!");

  return <Button onClick={greet} />;
}

// Child Component
function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

এতে Child Component Parent-এর function চালাতে পারে।

Props দিয়ে Array পাঠানো

// Parent
<List items={["Apple", "Mango", "Banana"]} />

// Child
function List({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

Props দিয়ে Object পাঠানো

// Parent
const user = { name: "Amit", age: 22 };
<Profile info={user} />

// Child
function Profile({ info }) {
  return (
    <div>
      <h3>{info.name}</h3>
      <p>Age: {info.age}</p>
    </div>
  );
}

Props are Read-Only — কেন পরিবর্তন করা যায় না?

Props immutable (পরিবর্তন করা যায় না)। কারণ:

• Parent যে ডেটা Child-কে পাঠিয়েছে, Child সেটি পরিবর্তন করতে পারে না।
• এটি data flow predictable রাখে।
• State management সহজ হয়।

যদি পরিবর্তনই করতে হয় → State ব্যবহার করতে হবে।

Common Error: Props পরিবর্তন করার চেষ্টা

props.name = "Changed"; // ❌ ভুল

এভাবে কখনও props পরিবর্তন করবেন না।

Props বনাম State — পার্থক্য

Real-world Example: Reusable Card Component

Parent Component

<Card 
  title="React Tutorial" 
  description="Learn React step by step." 
  price={499}
/>

<Card 
  title="Node.js Course" 
  description="Backend development with Node." 
  price={599}
/>

Child Component (Card)

function Card({ title, description, price }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
      <h4>Price: ₹{price}</h4>
    </div>
  );
}

একটি Component দিয়ে দুইটি আলাদা UI পাচ্ছেন — props এর জন্যই সম্ভব!

Best Practices

• Destructuring সবসময় ব্যবহার করুন
• Props ছোট ও পরিষ্কার রাখুন
• যে Props প্রয়োজন নেই তা পাঠাবেন না
• Reusable component ডিজাইন করতে props অপরিহার্য
• Props পরিবর্তন না করে State ব্যবহার করুন

উপসংহার

React-এ Props হলো data passing-এর backbone। Component Reusability, Dynamic UI এবং Clean Architecture সবকিছুতেই props খুব গুরুত্বপূর্ণ ভূমিকা পালন করে। নতুনরা যদি props ভালোভাবে শিখে, তাহলে React-এর ৫০% ধারণা পরিষ্কার হয়ে যায়।

আপনি চাইলে একইভাবে “State কী?” বা “useState Hook কিভাবে কাজ করে?”— এগুলোর পূর্ণ HTML content চাইতে পারেন।